<template>
    <div class="goods-hot">
        <h3>{{title}}</h3>
        <div v-if="goodsList">
            <GoodsItem v-for="item in goodsList" :key="item.id" :goods="item"/>
        </div>
    </div>
</template>

<script>
    import {findGoodsHot} from "@/api/product";
    import GoodsItem from "@/views/category/components/goods-item";

    export default {
        name: "GoodsHot",
        components: {GoodsItem},
        props: {
            type: {
                type: Number,
                default: 1
            },
            goodsId: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                goodsList: []
            }
        },
        created() {
            this.findGoodsHot()
        },
        methods: {
            async findGoodsHot() {
                const {result} = await findGoodsHot({id: this.goodsId, type: this.type})
                this.goodsList = result
            }
        },
        computed: {
            title() {
                const titleObj = {1: '24小时热销榜', 2: '周热销榜', 3: '总热销榜'}
                return titleObj[this.type]
            }
        }
    }
</script>

<style scoped lang="less">

    .goods-hot {
        h3 {
            height: 70px;
            background: @helpColor;
            color: #fff;
            font-size: 18px;
            line-height: 70px;
            padding-left: 25px;
            margin-bottom: 10px;
            font-weight: normal;
        }

        ::v-deep .goods-item {
            background: #fff;
            width: 100%;
            margin-bottom: 10px;

            img {
                width: 200px;
                height: 200px;
            }

            p {
                margin: 0 10px;
            }

            &:hover {
                transform: none;
                box-shadow: none;
            }
        }
    }

</style>